<template>
  <div class="hazardous-chemicals-management bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-6">事故模拟分析</h2>

    <div class="search-form bg-card text-card-foreground shadow-md rounded-lg mb-6 p-6">
      <!-- <query-form :model="filters" :formItems="formItems" @search="loadData" @reset="resetFilters" /> -->
      <el-form :inline="true" :model="filters" class="query-form-inline">
        <el-form-item label="模拟编码：">
          <el-input v-model="filters.ANALOG_CODE" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="模拟时间：">
          <input type="date" v-model="filters.startDate"
            class="input-time-query mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />&nbsp;&nbsp;~&nbsp;&nbsp;<input
            type="date" v-model="filters.endDate"
            class="input-time-query mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
        </el-form-item>
        <!-- <el-form-item label="结束模拟时间：">
          <input type="date" v-model="filters.endDate"
            class="input-time-query mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" />
        </el-form-item> -->
        <el-form-item class="query-btns">
          <el-button @click="resetFilters" style="width: 75px; height: 30px;">重置</el-button>
          <el-button type="primary" @click="loadData" style="width: 75px; height: 30px;">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="mb-4 space-x-2">
      <!-- <el-button type="primary" @click="addNew" style="width: 75px; height: 30px;">新增</el-button> -->
      <!-- <el-button @click="deleteSelected" style="width: 75px; height: 30px;">删除</el-button> -->
      <!-- <el-button @click="openImportDialog" style="width: 75px; height: 30px;">导入</el-button> -->
      <el-button @click="exportData" style="width: 75px; height: 30px;">导出</el-button>
    </div>

    <div class="bg-card text-card-foreground my-6 rounded shadow-md">
      <el-table v-loading="loading" :data="paginatedData" style="width: 100%" @selection-change="handleSelectionChange"
        ref="tableRef" align="center" class="data-table" :header-cell-style="headerCellStyle" empty-text="暂无数据"
        :row-key="rowKey">
        <!-- <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> -->
        <el-table-column prop="ANALOG_CODE" label="模拟编码" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ANALOG_TIME" label="模拟时间" header-align="center" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.ANALOG_TIME
            ) }}
          </template>
        </el-table-column>
        <el-table-column prop="ACCIDENT_TYPE" label="事故类型" header-align="center" align="center"></el-table-column>
        <el-table-column prop="SIMULATION" label="模型参数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ACCIDENT_CRI" label="事故发生情况" header-align="center" align="center"></el-table-column>
        <el-table-column prop="SIMULATION_RESULTS" label="模拟结果摘要" header-align="center"
          align="center"></el-table-column>
        <el-table-column prop="ACCIDENT_CODE" label="关联事故编号" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template #default="scope">
            <!-- <el-button type="primary" size="small" @click="editItem(scope.row)" link>编辑</el-button> -->
            <el-button type="primary" size="small" @click="viewDetails(scope.row)" link>查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination bg-card text-card-foreground p-4 mt-4 flex items-center justify-between">
      <div>
        <p class="text-sm text-muted-foreground">
          一共检索到 <span class="font-medium total-num">{{ totalItems }}</span> 条信息
        </p>
      </div>
      <div class="flex items-center space-x-2">
        <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
          上一页
        </button>
        <span class="text-sm text-muted-foreground">
          {{ currentPage }} / {{ totalPages }}
        </span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-secondary btn-sm"
          :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }">
          下一页
        </button>
      </div>
    </div>
    <!-- 查看详情对话框 -->
    <el-dialog class="dialog-from" v-model="isViewDialogOpen" title="事故模拟分析详情" width="900" destroy-on-close
      align-center>
      <div class="body-item">
        <div class="box-title">
          <div class="box-color"></div><strong>基本信息</strong>
        </div>
        <div class="box-content">
          <!-- <el-descriptions title="" :column="3">
            <el-descriptions-item label="模拟编码：">{{ selectedItem.ANALOG_CODE }}</el-descriptions-item>
            <el-descriptions-item label="模拟时间：">{{ formatDateTime(selectedItem.ANALOG_TIME) }}</el-descriptions-item>
            <el-descriptions-item label="事故类型：">{{ selectedItem.ACCIDENT_TYPE }}</el-descriptions-item>
            <el-descriptions-item label="模型参数：">{{ selectedItem.SIMULATION }}</el-descriptions-item>
            <el-descriptions-item label="事故发生情况：">{{ selectedItem.ACCIDENT_CRI }}</el-descriptions-item>
            <el-descriptions-item label="模拟结果摘要：">{{ selectedItem.SIMULATION_RESULTS }}</el-descriptions-item>
            <el-descriptions-item label="关联事故编号：">{{ selectedItem.ACCIDENT_CODE }}</el-descriptions-item>
          </el-descriptions> -->
          <el-descriptions title="" :column="3">
            <el-descriptions-item label="模拟编码：">{{ selectedItem.ANALOG_CODE }}</el-descriptions-item>
            <el-descriptions-item label="模拟时间：">{{ formatDateTime(selectedItem.ANALOG_TIME) }}</el-descriptions-item>
            <el-descriptions-item label="事故类型：">{{ selectedItem.ACCIDENT_TYPE }}</el-descriptions-item>

            <el-descriptions-item label="模型参数：" :span="3"
              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
              {{ selectedItem.SIMULATION }}
            </el-descriptions-item>

            <el-descriptions-item label="事故发生情况：" :span="3"
              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
              {{ selectedItem.ACCIDENT_CRI }}
            </el-descriptions-item>

            <el-descriptions-item label="模拟结果摘要：" :span="3"
              style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
              {{ selectedItem.SIMULATION_RESULTS }}
            </el-descriptions-item>

            <el-descriptions-item label="关联事故编号：">{{ selectedItem.ACCIDENT_CODE }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isViewDialogOpen = false">确认</el-button>
          <el-button @click="isViewDialogOpen = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import axios from 'axios'
import { getCurrentInstance } from 'vue'
import * as XLSX from 'xlsx'
const { proxy } = getCurrentInstance()
import { genFileId, dayjs } from 'element-plus'

import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-plus'
const apiBaseUrl = ref(proxy.$currentUrl + '/api/accident')

const filters = ref({
  ANALOG_CODE: '',
  startDate: '',
  endDate: '',
})
const chemicalsData = ref([])
const currentPage = ref(1)
const itemsPerPage = 10
const selectAll = ref(false)
const isEditing = ref(false)
const pageSize = ref(10)
const formData = ref({
  ID: null,
  COMPANY_CODE: '',
  DRILL_CODE: '',
  DRILL_NAME: '',
  DRILL_DATE: '',
  RALLY_POINT: '',
  DRILL_UNITS: '',
  DRILL_STRUCTURES: '',
  PARTIC_NUM: '',
  DRILL_PROCESS: '',
  ATTACH: '',
  ATTACH_NAME: '',
  DRILL_SCRIPT: '',
  DRILL_SCRIPT_NAME: '',
})

const totalItems = computed(() => chemicalsData.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)


// const startIndex = computed(() => (currentPage.value - 1) * itemsPerPage)
// const endIndex = computed(() => Math.min(startIndex.value + itemsPerPage, totalItems.value))

const paginatedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return chemicalsData.value.slice(start, end)
})

const loadData = async () => {
  try {
    loading.value = true
    const response = await axios.get(`${apiBaseUrl.value}/search`, {
      params: filters.value,
    })
    chemicalsData.value = response.data
    currentPage.value = 1
    loading.value = false
  } catch (error) {
    console.error('获取事故模拟分析失败:', error)
    alert(
      '获取事故模拟分析失败: ' + (error.response?.data?.message || error.message),
    )
  }
}
const file = ref(null);
const beforeUpload = (file) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel'
  if (!isExcel) {
    // this.$message.error('上传文件只能是 CSV 格式!');
    console.log('只能上传Excel文件！')
  }
  return isExcel;
};
const uploadRef = ref(null);
const isImportDialogOpen = ref(false)
const handleFileChange = (fileList) => {
  file.value = fileList;
  // console.log(fileList.file)
};
const submitFile = () => {
  if (file.value) {
    // 这里可以添加文件处理逻辑
    console.log('上传的文件:', file.value);
    uploadRef.value.submit();
    alert('导入成功')
    isImportDialogOpen.value = false;
  } else {
    // this.$message.warning('请先选择文件!');
    console.log('请先选择文件')
  }
};
const openImportDialog = () => {
  resetFile()
  isImportDialogOpen.value = true
}
const downloadTemplate = async () => {
  await axios.get(`${apiBaseUrl.value}/Plan/export`)
};
const handleAttachChange = (file, fileList) => {
  // 处理文件上传后的逻辑
  formData.value.ATTACH_NAME = file.name
  formData.value.ATTACH = file.raw; // 这里可以根据需要调整
};
const handleDrillScriptChange = (file, fileList) => {
  // 处理文件上传后的逻辑
  formData.value.DRILL_SCRIPT_NAME = file.name
  formData.value.DRILL_SCRIPT = file.raw; // 这里可以根据需要调整
};

const uploadAttach = ref(null)
const uploadDrillScript = ref(null)
const handleAttachExceed = (files) => {
  uploadAttach.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadAttach.value.handleStart(file);
};
const handleDrillScriptExceed = (files) => {
  uploadDrillScript.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  uploadDrillScript.value.handleStart(file);
};
const viewAttachment = (url) => {
  // 处理查看附件逻辑
  // 例如：打开一个新窗口来查看附件
  if (url) {
    window.open(`${proxy.$currentUrl + url}`, '_blank')
  }
}
const isViewDialogOpen = ref(false)
const selectedItem = ref(null)
const viewDetails = (item) => {
  selectedItem.value = { ...item } // 创建一个新对象以避免引用问题
  isViewDialogOpen.value = true
}
const resetFilters = () => {
  filters.value = {
    ANALOG_CODE: '',
    startDate: '',
    endDate: '',
  }
  loadData() // 重新加载所有数据
}

const rules = reactive({
  COMPANY_CODE: [
    { required: true, message: '请输入编制单位编码', trigger: 'blur' },
  ],
  DRILL_CODE: [
    { required: true, message: '请输入演练编码', trigger: 'blur' },
  ],
  DRILL_NAME: [
    { required: true, message: '请输入演练方案名称', trigger: 'blur' },
  ],
  DRILL_DATE: [
    { required: true, message: '请选择演练时间', trigger: 'change' },
  ],
  RALLY_POINT: [
    { required: true, message: '请输入集结地点', trigger: 'blur' },
  ],
  DRILL_UNITS: [
    { required: true, message: '请选择演练单位', trigger: 'change' },
  ],
  DRILL_STRUCTURES: [
    { required: true, message: '请输入演练组织机构', trigger: 'blur' },
  ],
  PARTIC_NUM: [
    { required: true, message: '请输入参与人数', trigger: 'blur' },
  ],
  DRILL_SCRIPT: [
    { required: true, message: '请选择演练脚本', trigger: 'change' },
  ],
  DRILL_PROCESS: [
    { required: true, message: '请输入演练流程', trigger: 'blur' },
  ],
})

const formRef = ref(null)
const showForm = ref(false)

const dialogVisible = ref(false)
const dialogTitle = computed(() => isEditing.value ? '编辑危化品' : '新增危化品')

const addNew = () => {
  isEditing.value = false
  dialogVisible.value = true
  isDialogType.value = 'add'
  formData.value = {
    ID: null,
    COMPANY_CODE: '',
    DRILL_CODE: '',
    DRILL_NAME: '',
    DRILL_DATE: '',
    RALLY_POINT: '',
    DRILL_UNITS: '',
    DRILL_STRUCTURES: '',
    PARTIC_NUM: '',
    DRILL_PROCESS: '',
    ATTACH: '',
    ATTACH_NAME: '',
    DRILL_SCRIPT: '',
    DRILL_SCRIPT_NAME: '',
  }
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
const resetFile = () => {
  file.value = null;
};
const editItem = (item) => {
  isEditing.value = true
  dialogVisible.value = true
  isDialogType.value = 'edit'
  formData.value = { ...item }
  // formData.value.DRILL_DATE = formatDateTimeForInput(item.DRILL_DATE)
  console.log('formData.value', formData.value)
}

const viewItem = (item) => {
  isEditing.value = false
  dialogVisible.value = true
  formData.value = { ...item }
}
const uploadedImage = ref('')
// 新增提交
const handleSubmit = () => {
  try {
    formRef.value.validate(async (valid) => {
      if (valid) {
        if (!formData.value.ID) {
          const response = await axios.post(`${apiBaseUrl.value}`, formData.value, {
            headers: { 'Content-Type': 'multipart/form-data' }
          })
          alert(response.data.message || '创建演练计划成功')
        } else {
          const response = await axios.put(`${apiBaseUrl.value}/${formData.value.ID}`, formData.value, {
            headers: { 'Content-Type': 'multipart/form-data' }
          })
          alert(response.data.message || '更新演练计划成功')
        }
        await loadData()
        closeAddDialog()
      }
    })
  } catch (error) {
    console.error('创建危险化学品失败:', error)
    alert(
      '创建危险化学品失败: ' + (error.response?.data?.message || error.message),
    )
  }
}
const closeAddDialog = () => {
  dialogVisible.value = false
  resetExpertForm()
}
const resetExpertForm = () => {
  formData.value = {
    ID: null,
    COMPANY_CODE: '',
    DRILL_CODE: '',
    DRILL_NAME: '',
    DRILL_DATE: '',
    RALLY_POINT: '',
    DRILL_UNITS: '',
    DRILL_STRUCTURES: '',
    PARTIC_NUM: '',
    DRILL_PROCESS: '',
    ATTACH: '',
    ATTACH_NAME: '',
    DRILL_SCRIPT: '',
    DRILL_SCRIPT_NAME: '',
  }
}
const saveChemical = () => {
  if (formRef.value) {
    formRef.value.validate((valid) => {
      if (valid) {
        if (isEditing.value) {
          const index = chemicalsData.value.findIndex(item => item.id === formData.value.id)
          if (index !== -1) {
            chemicalsData.value[index] = { ...formData.value }
          }
        } else {
          chemicalsData.value.push({
            id: chemicalsData.value.length + 1,
            ...formData.value,
            selected: false
          })
        }
        ElMessage.success(isEditing.value ? '编辑成功' : '新增成功')
        closeDialog()
      } else {
        ElMessage.error('请填写完整信息')
        return false
      }
    })
  }
}

const closeDialog = () => {
  dialogVisible.value = false
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
const tableRef = ref(null)
const deleteSelected = async () => {
  // chemicalsData.value = chemicalsData.value.filter(item => !item.selected)
  // selectAll.value = false
  try {
    if (selectedIds.value.length === 0) {
      alert('请至少选择一条记录进行删除')
      return
    }
    if (!confirm(`确定要删除选中的 ${selectedIds.value.length} 条记录吗？`)) {
      return
    }
    const deletePromises = selectedIds.value.map(item =>
      axios.delete(`${apiBaseUrl.value}/${item.ID}`)
    )
    await Promise.all(deletePromises)
    alert('删除成功')
    if (tableRef.value) {
      tableRef.value.clearSelection();
    }
    selectedIds.value = []
    await loadData()
    if (currentPage.value > totalPages.value) {
      currentPage.value = totalPages.value;
    }
    // await nextTick(); // 确保 DOM 更新
  }
  catch (error) {
    console.error('删除失败:', error)
    alert('删除失败: ' + (error.response?.data?.message || error.message))
  }
}

const removeItem = (item) => {
  chemicalsData.value = chemicalsData.value.filter(i => i.id !== item.id)
}

const exportData = () => {
  // 创建一个工作簿
  const wb = XLSX.utils.book_new()

  // 准备要导出的数据
  const exportData = chemicalsData.value.map((expert) => ({
    模拟编码: expert.ANALOG_CODE,
    模拟时间: formatDateTime(expert.ANALOG_TIME),
    事故类型: expert.ACCIDENT_TYPE,
    模型参数: expert.SIMULATION,
    事故发生情况: expert.ACCIDENT_CRI,
    模拟结果摘要: expert.SIMULATION_RESULTS,
    关联事故编号: expert.ACCIDENT_CODE,
  }))

  // 将数据转换为工作表
  const ws = XLSX.utils.json_to_sheet(exportData)

  // 将工作表添加到工作簿，并设置表名为"应急专家管理"
  XLSX.utils.book_append_sheet(wb, ws, '事故模拟分析')

  // 生成二进制字符串
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })

  // 将二进制字符串转换为 Blob
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })

  // 创建下载链接
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '事故模拟分析.xlsx'

  // 模拟点击下载
  link.click()

  // 释放 URL 对象
  URL.revokeObjectURL(link.href)
}

// 添加 s2ab 辅助函数
function s2ab(s) {
  const buf = new ArrayBuffer(s.length)
  const view = new Uint8Array(buf)
  for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff
  return buf
}


const importData = (event) => {
  const file = event.target.files[0]
  const reader = new FileReader()
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })
    const worksheet = workbook.Sheets[workbook.SheetNames[0]]
    const jsonData = XLSX.utils.sheet_to_json(worksheet)
    chemicalsData.value = jsonData.map((item, index) => ({
      id: index + 1,
      ...item,
      selected: false
    }))
  }
  reader.readAsArrayBuffer(file)
}

const toggleSelectAll = () => {
  selectAll.value = !selectAll.value
  chemicalsData.value.forEach(item => item.selected = selectAll.value)
}
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    // loadData()
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    // loadData()
  }
}
const goToPage = (page) => {
  currentPage.value = page
}
// 添加格式化日期时间的辅助函数
const formatDateTimeForInput = (dateTimeString) => {
  if (!dateTimeString) return ''
  const date = new Date(dateTimeString)
  return date.toISOString().slice(0, 16) // 格式为 "YYYY-MM-DDTHH:mm"
}

const formItems = ref([
  {
    label: '会议编码：',
    model: 'RECORD_ID',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '演练名称：',
    model: 'MERGENCE_DRILL_NAME',
    type: 'input',
    placeholder: '请输入',
  },
  {
    label: '演练类型：',
    model: 'team_type',
    type: 'select',
    placeholder: '请选择',
    options: [
      { label: '桌面演练', value: '桌面演练' },
      { label: '实战演练', value: '实战演练' },
    ],
  },
]);
const rowKey = (row) => row.id; // 设置行的唯一标识
// 表头样式
const headerCellStyle = {
  height: '30px', // 设置表头高度
  lineHeight: '30px', // 设置行高以垂直居中
  backgroundColor: '#f2f2f2', // 可选：设置背景颜色
  // fontSize: '16px', // 可选：设置字体大小
};
const isDialogType = ref('')
const loading = ref(false)
const selectedIds = ref([])
const handleSelectionChange = (selected) => {
  selectedIds.value = selected;
};
// 添加格式化日期时间的函数
const formatDateTime = (dateTimeString) => {
  // if (!dateTimeString) return ''
  // const date = new Date(dateTimeString)

  // // 获取年份、月份和日期
  // const year = date.getFullYear()
  // const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以要加1
  // const day = String(date.getDate()).padStart(2, '0')

  // // 返回格式化后的日期
  // return `${year}/${month}/${day}`
  if (!dateTimeString) return null
  const date = dayjs(dateTimeString).format('YYYY/MM/DD HH:mm')
  return date
}

// Initial data load
onMounted(() => {
  loadData()
})

// 添加这些样式相关的计算属性
const btnClasses = computed(() => {
  return 'px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out'
})

const btnPrimaryClasses = computed(() => {
  return [btnClasses.value, 'bg-primary text-primary-foreground hover:bg-primary/90']
})

const btnSecondaryClasses = computed(() => {
  return [btnClasses.value, 'bg-secondary text-secondary-foreground hover:bg-secondary/80']
})

const btnDestructiveClasses = computed(() => {
  return [btnClasses.value, 'bg-destructive text-destructive-foreground hover:bg-destructive/90']
})

// 更新你的模板以使用这些计算属性作为按钮类
</script>

<style scoped></style>
<style lass="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  /* 按钮居中对齐 */
}

.total-num {
  color: #02a7f0;
  font-size: 28px;
}

:deep(.dialog-from.el-dialog) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

:deep(.dialog-from .el-dialog__header) {
  padding: 11px 17px;
  background-color: #f2f2f2;
  font-size: 18px;
}

:deep(.dialog-from .el-dialog__body) {
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 20px;
}

.body-item {}

.box-title {
  margin-bottom: 10px;
}

:deep(.box-color) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #027db4;
  margin-right: 10px;
}

.box-content {
  /* height: 80px; */
}

.row-item {
  height: 80px;
  /* margin-bottom: 20px; */
}

.input-time {
  border-radius: 4px;
  margin-top: 0;
  box-shadow: 0 0 0 1px #dcdfe6;
}

.input-time:hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.upload-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.input-upload {
  width: 100%;
}

.attachment-name {
  cursor: pointer;
}

.download-text {
  color: #409eff;
  cursor: pointer;
  text-align: center;
}

/* .query-btns {
  margin: 0;
  text-align: right;
  width: 100%;
}

:deep(.query-btns .el-form-item__content) {
  display: inline-block;
} */
.query-btns {
  float: right;
}

.query-form-inline :deep(.el-form-item) {
  margin-bottom: 0;
}

.query-form-inline :deep(.el-form-item .el-select) {
  width: 180px;
}
</style>
